<!-- 书架书籍 -->
<script setup lang="ts">
import { ref } from 'vue';
import { showSuccessToast } from 'vant';
import { toRaw } from 'vue';
import { getBookInfo } from '@/api/getAxios';
import { useRouter } from 'vue-router';

const $router = useRouter()
const showBottom = ref(false)
const oncheck = ref(false)
const data = defineProps({
    storyId: String
})
const onshow = ref(true)
const bookitem = ref()
getBookInfo(<any>toRaw(data.storyId)).then((res) => {
    bookitem.value = res.data.data
})
//长按事件
const goTouchstart = function (this: any) {
    oncheck.value = true
    let _this = this;
    clearTimeout(_this.timeOutEvent);
    _this.timeOutEvent = setTimeout(function () {
        _this.timeOutEvent = 0;
        _this.show = true
        showBottom.value = true
        oncheck.value = false
    }, 600);
}
//滑动事件
const goTouchmove = function (this: any) {
    let _this = this
    clearTimeout(_this.timeOutEvent);
    oncheck.value = false
}
//点击事件
const goTouchend = function (this: any) {
    let _this = this;
    clearTimeout(_this.timeOutEvent);
    if (_this.timeOutEvent !== 0) {
        oncheck.value = true
        $router.push({ path: "BookInfo", query: { storyId: bookitem.value.id } })
        setTimeout(() => {
            oncheck.value = false
        }, 200);
    }
}
//移除书架书籍
const removeBook = function () {
    let data = JSON.parse(<any>localStorage.getItem("bookshelf"))
    data.splice(data.indexOf((bookitem.value.id)), 1)
    showBottom.value = false
    localStorage.setItem("bookshelf", JSON.stringify(data))
    onshow.value = false
    showSuccessToast('移除成功');
}

</script>
<template>
    <li v-if="bookitem" :key="bookitem.id" @touchstart="goTouchstart()" @touchmove="goTouchmove()" @click="goTouchend()"
        :class="{ check: oncheck }" v-show="onshow">
        <img :src="bookitem.cover">
        <p>{{ bookitem.name }}</p>
    </li>
    <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '30%' }" round>
        <p>😨</p>
        <p>移除这本书？</p>
        <button @click="removeBook">确定</button>
    </van-popup>
</template>

<style scoped lang='less'>
li {
    background-color: white;
    width: 30%;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 gainsboro;
    margin: 4px 1.6%;
    overflow: hidden;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 175px;
    animation: show 1s;

    @keyframes show {
        from {
            transform: translateY(-10%);
            opacity: 0;
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    &:active {
        opacity: 0.8;
    }

    img {
        width: 100%;
    }

    p {
        font-size: .85rem;
        text-align: center;
        margin: 10% 0;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        white-space: nowrap;
        padding: 0 10px;
    }
}

.check {
    opacity: 0.8;
}

.van-popup {
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    padding: 20px 0;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(2px);

    p:nth-child(1) {
        font-size: 3rem;
    }

    button {
        background-color: #FE3370;
        color: whitesmoke;
        border: 0;
        padding: 8px 10%;
        border-radius: 10px;
        font-size: .9rem;
        transition: all 0.2s;
        box-shadow: 0 0 14px 6px gainsboro;

        &:active {
            opacity: 0.8;
        }
    }
}
</style>